<template>
  <div id="app">
    <router-view />
    <custom-dialog />
    <test-mode-dialog />
    <gongDan-dialog
      :type_info_list="type_info_list"
      :customerId_sub_list="customerId_sub_list"
      :form_item_arr="form_item_arr"
      :token="getToken()"
      :tmp="curTmp"
      :tck="curTck"
    />

    <div class="kefuServive" v-if="haslogin">
      <el-tooltip
        class="item"
        effect="dark"
        content="提交工单"
        placement="left-start"
      >
        <div class="box top" @click="openGongdan">
          <img src="@/assets/imgs/layout/fix2.png" alt="" />
        </div>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="帮助中心"
        placement="left-start"
      >
        <div class="box bottom">
          <img src="@/assets/imgs/layout/fix1.png" alt="" />
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import GongDanDialog from "@/components/gongdanDialog.vue";
import CustomDialog from "@/components/customDialog.vue";
import TestModeDialog from "@/components/testModeDialog.vue";
// import { clearCache } from "@/utils/public";
import { mapState } from "vuex";
import { getToken } from "@/utils/public";
import crypto from "@/crypto";
import { randomWord } from "@/utils/getRandom";

export default {
  data() {
    return {
      curTmp: null,
      curTck: null,
      len: [8, 9, 10, 11, 12][
        Math.floor(Math.random() * [8, 9, 10, 11, 12].length)
      ],

      commandType: 0,
      type_info_list: [], //一级
      customerId_sub_list: [], // 2级
      form_item_arr: [], //3级控件
      haslogin: true,
    };
  },
  components: {
    GongDanDialog,
    CustomDialog,
    TestModeDialog,
  },
  computed: {
    ...mapState(["regisMessTit", "regisMessBtn", "regisMessCommand"]),
  },
  watch: {
    $route(to) {
      if (to.path.includes("/qiye/")) {
        this.$store.commit("changeMenuType", 2);
        this.$store.state.qiyeMenu.forEach((e) => {
          if (e.url == to.path) {
            this.$store.commit("changePath", e.index);
          }
        });
        this.$store.commit("changeShowChildMenu", false);
      } else if (to.path.includes("/geren/")) {
        this.$store.commit("changeMenuType", 3);
        this.$store.state.gerenMenu.forEach((e) => {
          if (e.url == to.path) {
            this.$store.commit("changePath", e.index);
          }
        });
        this.$store.commit("changeShowChildMenu", false);
      } else {
        this.$store.commit(
          "changeAppId",
          localStorage.getItem("appId") ? localStorage.getItem("appId") : ""
          // sessionStorage.getItem("appId") ? sessionStorage.getItem("appId") : ""
        );
        this.$store.commit("changeMenuType", 1);
        this.$store.state.merchantMenu.forEach((e) => {
          if (e.url) {
            if (e.url == to.path) {
              this.$store.commit("changePath", e.index);
              this.$store.commit("changeShowChildMenu", false);
            }
          } else {
            e.children.forEach((c) => {
              if (c.url == to.path) {
                this.$store.commit("changePath", e.index);
                this.$store.commit("changeCheckedMenuItem", {
                  index: c.index,
                });
                this.$store.commit("changeCheckedMenuItem", {
                  children: e.children,
                });
                this.$store.commit("changeShowChildMenu", true);
              }
            });
          }
        });
      }

      //客服弹窗登录页隐藏
      if (to.path.includes("/login")||to.path.includes("/qiyeUserCreate")) {
        this.haslogin = false;
      } else {
        this.haslogin = true;
      }
    },
    "$store.state.menuType": {
      handler(val) {
        if (val == "1") {
          let t;
          this.$store.commit("changeLive", false);
          t = setTimeout(() => {
            this.$store.commit("changeLive", true);
            clearTimeout(t);
          }, 0);
        }
      },
    },
    "$store.state.regisMessTag": {
      handler(val) {
        console.log(val);
        if (val) {
          this.alertRegisterMess();
        }
      },
    },
  },
  mounted() {
    var ele = document.getElementById("app");
    ele.onclick = () => {
      this.$store.commit("changeGlobalSearch", false);
    };

    window.toRegis = this.toRegis;
  },
  methods: {
    getToken,
    getTokenInfo() {
      this.curTmp = new Date().getTime();
      this.curTck = crypto.set(
        getToken() + "_" + this.curTmp + "_" + randomWord(this.len),
        "a1g0qoalvv19aed3"
      );
    },
    openGongdan() {
      this.$http.get("/api/workOrderInfo/getOrderTypeList").then((res) => {
        if (res.code === "0000") {
          console.log(res.data);
          this.type_info_list = res.data;
          // this.$store.commit("changeGongdan", true);

          //添加默认二级分类请求
          this.type_info_list.length &&
            this.getSubGongdan(this.type_info_list[0].id);
        }
      });
      
      //获取请求头token相关信息
      this.getTokenInfo();
    },
    getSubGongdan(val) {
      this.$http
        .get(`/api/workOrderInfo/getOrderTypeDarailByTypeId?typeId=${val}`)
        .then((res) => {
          if (res.code == "0000") {
            if (res.data[0].name == "") {
              console.log("无2级菜单");
              if (res.data[0].controlList && res.data[0].controlList.length) {
                let list = res.data[0].controlList;
                this.form_item_arr = list;
                this.$store.commit("changeGongdan", true);
              }
            } else {
              console.log("有2级菜单");
              this.customerId_sub_list = res.data;
              // this.$store.commit("changeGongdan", true);
              this.customerId_sub_list.length &&
                this.getChildGongdan(this.customerId_sub_list[0].id);
            }
          }
        });
    },
    getChildGongdan(val) {
      let obj = this.customerId_sub_list.find((item) => item.id == val);
      this.form_item_arr = obj.controlList;
      this.$store.commit("changeGongdan", true);
    },
    alertRegisterMess() {
      this.$message({
        type: "error",
        dangerouslyUseHTMLString: true,
        message: `<span>${this.regisMessTit}</span> <span onclick="toRegis()" style="display:inline-block;font-size: 14px;margin-left:25px;color: #03BFC6;cursor:pointer">${this.regisMessBtn}</span>`,
      });
    },
    toRegis() {
      this.$router.push({
        path: "/companyPersonInfo",
        query: { command: this.regisMessCommand },
      });
    },
  },
};
</script>
<style lang="scss">
@import "./common.scss";

.kefuServive {
  position: fixed;
  bottom: 100px;
  right: 10px;

  width: 36px;
  height: 93px;
  background: #03bfc6;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  .box {
    padding: 8px 0;
    cursor: pointer;
    &.top {
      border-bottom: 1px solid #ffffff;
    }
  }
}
</style>
